<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;!important;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>首页管理 / 标签列表</span>
            </p>
            <!--标签数据-->
            <div style="height: 500px;">
                <Tag style="margin: 1% 1% 0 1%" v-for="(tag,index) in tagList" :key="index" size="large" closable
                     type="dot" @on-close="deleteTag(tag.tagId)"
                     :color="tagStyle[Math.floor(Math.random()*tagStyle.length)]">
                    {{tag.tagContent}}
                </Tag>
                <Button v-if="!addTagVisable" style="margin: 1% 1% 0 1%" icon="ios-add"
                        @click="showInput">添加标签
                </Button>
                <Input ref="inputId" v-else style="margin: 1% 1% 0 1%;width: 160px;" v-model="addTagVo.content"
                       placeholder="标签内容"
                       @keyup.native.esc="addTagVisable=false" @on-blur="addTagVisable=false"
                       @keyup.native.enter="addTag"/>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        addTagVo: {
          content: ''
        },
        addTagVisable: false,
        tagList: [],
        tagStyle: ['primary', 'success', 'error', 'warning', 'magenta', 'red', 'volcano', 'orange', 'gold', 'yellow', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple']
      }
    },
    mounted() {
      this.getTags()
    },
    methods: {
      getTags() {
        this.$http.get('tags').then(res => {
          res = res.data;
          if (res.code === 0) {
            this.tagList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 添加标签
      addTag() {
        this.$http.post('tag', new URLSearchParams(this.addTagVo)).then(res => {
          res = res.data;
          if (res.code === 6701) {
            this.addTagVo.content = ''
            this.getTags();
            this.$Message.success(res.msg);
          } else {
            this.$Message.error(res.msg);
          }
        })
      },
      // 删除标签
      deleteTag(id) {
        this.$http.delete(`tag?id=${id}`).then(res => {
          res = res.data;
          if (res.code === 6720) {
            this.getTags()
            this.$Message.success(res.msg)
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 显示输入框
      showInput() {
        this.addTagVisable = true;
        this.$nextTick(() => {
          this.$refs.inputId.focus()
        })
      }
    }
  }
</script>

<style scoped>

</style>
